/* 图片自动适配父元素尺寸 */
img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

::-webkit-scrollbar {
    display: none;
}

/* 标题 */
#headline h1 {
    width: 100%;
    height: 5%;
    margin: 20px auto 0;
    padding: 20px;
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
}

#gallery {
    width: 100%;
    height: 100%;
    min-width: 700px;
    min-height: 500px;
    margin: 20px auto 0;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    /* 默认不显示，加载完第一个图片后显示 */
    /* display: none; */
}

/* 大图显示区域 */
#display {
    width: 60%;
    height: 100%;
    min-width: 600px;
    min-height: 500px;
    float: left;
    border: 5px solid #fff;
}

/* 缩略图列表 */
#menu {
    width: 30%;
    height: 100%;
    min-height: 500px;
    margin-right: 5%;
    float: right;
    border: 5px solid #fff;
}

#menu ul {
    width: 100%;
    height: 90%;
    margin: 5%;
    float: left;
}
#menu ul li {
    max-width: 45%;
    max-height: 30%;
    margin: 3% 2%;
    float: left;
}
#gallery ul li span {
    display:flex;
    width: auto;
    height: 100px;
    max-width: 120px;
    border: 1px solid #fff;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    align-items: center;
    justify-content: center;
}
#gallery ul li span img {
    opacity: 0.5;
}
#gallery ul li:hover span img {
    opacity:1;
}

.clearfix {
    clear: both;
}